<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="reportId" label="报告ID" width="100" align="center">
			</el-table-column>
			<el-table-column prop="visitId" label="就诊号" width="150" align="center">
			</el-table-column>
			<el-table-column prop="reportType" label="报告类型" width="120" align="center">
				<template slot-scope="scope">
					<el-tag :type="getReportTypeTag(scope.row.reportType)">
						{{ formatReportType(scope.row.reportType) }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="hospitalName" label="医院" width="150" align="center">
			</el-table-column>
			<el-table-column prop="createdTime" label="创建时间" width="180" align="center">
			</el-table-column>
			<el-table-column label="操作" width="200" align="center">
				<template slot-scope="scope">
					<el-button @click="showReportDetail(scope.row.medicalReportInfo)" type="primary" size="small"
						icon="el-icon-view">
						查看详情
					</el-button>
					<el-button v-if="scope.row.medicalReportInfo?.ossUrl"
						@click="viewImage(scope.row.medicalReportInfo.ossUrl)" type="success" size="small"
						icon="el-icon-picture">
						查看影像
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 报告详情抽屉 -->
		<el-drawer title="报告详情" :visible.sync="detailDrawer" :direction="direction" size="60%">
			<div class="report-detail" v-if="currentReport">
				<!-- 报告基本信息 -->
				<el-descriptions title="基本信息" :column="2" border>
					<el-descriptions-item label="报告名称">{{ currentReport.reportName || '--' }}</el-descriptions-item>
					<el-descriptions-item
						label="报告类型">{{ formatReportType(currentReport.reportType) || '--' }}</el-descriptions-item>
					<el-descriptions-item label="就诊号">{{ currentReport.visitId || '--' }}</el-descriptions-item>
					<el-descriptions-item label="项目代码">{{ currentReport.itemCode || '--' }}</el-descriptions-item>
					<el-descriptions-item label="报告医生">{{ currentReport.reporterName || '--' }}</el-descriptions-item>
					<el-descriptions-item
						label="报告时间">{{ formatTime(currentReport.reportTime) || '--' }}</el-descriptions-item>
					<el-descriptions-item
						label="审核医生">{{ currentReport.verifyDoctorName || '--' }}</el-descriptions-item>
					<el-descriptions-item
						label="审核时间">{{ formatTime(currentReport.verifyTime) || '--' }}</el-descriptions-item>
				</el-descriptions>

				<!-- 结果项目 -->
				<div class="section" v-if="currentReport.resultItems">
					<h3>检查详情</h3>
					<el-descriptions :column="1" border v-if="parsedResultItems">
						<el-descriptions-item v-for="(value, key) in parsedResultItems" :key="key" :label="key">
							{{ value }}
						</el-descriptions-item>
					</el-descriptions>
					<p v-else>{{ currentReport.resultItems }}</p>
				</div>

				<!-- 结论 -->
				<div class="section">
					<h3>诊断结论</h3>
					<p class="conclusion">{{ currentReport.conclusion || '--' }}</p>
				</div>

				<!-- 影像链接 -->
				<div class="section" v-if="currentReport.ossUrl">
					<h3>影像资料</h3>
					<el-link type="primary" :href="currentReport.ossUrl" target="_blank" icon="el-icon-link">
						点击查看原始影像文件
					</el-link>
				</div>
			</div>
		</el-drawer>

		<!-- 影像预览对话框 -->
		<el-dialog title="影像预览" :visible.sync="imageDialogVisible" width="90%" top="5vh">
			<img :src="currentImageUrl" alt="" class="image-preview" height="400px" />
			<span slot="footer" class="dialog-footer">
				<el-button @click="imageDialogVisible = false">关闭</el-button>
				<el-button type="primary" @click="downloadImage">下载影像</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import http from '../../utils/request.js'
	export default {
		data() {
			return {
				tableData: [],
				detailDrawer: false,
				imageDialogVisible: false,
				direction: 'rtl',
				currentReport: null,
				currentImageUrl: null
			}
		},
		computed: {
			// 解析 resultItems JSON 字符串
			parsedResultItems() {
				if (!this.currentReport?.resultItems) return null;
				try {
					return JSON.parse(this.currentReport.resultItems);
				} catch (e) {
					console.error('解析 resultItems 失败:', e);
					return null;
				}
			}
		},
		async created() {
			await this.loadReportList();
		},
		methods: {
			async loadReportList() {
				try {
					const resp = await http.get(
						`/patient/getReportList?username=${this.$store.state.user.username}`
					);
					if (resp.data && resp.data.data) {
						// 处理数据格式，确保是数组
						if (Array.isArray(resp.data.data)) {
							this.tableData = resp.data.data;
						} else {
							this.tableData = [resp.data.data];
						}
					}
				} catch (error) {
					console.error('获取报告列表失败:', error);
					this.$message.error('加载报告列表失败');
				}
			},

			// 显示报告详情
			showReportDetail(report) {
				this.currentReport = report || {};
				this.detailDrawer = true;
			},

			// 查看影像
			viewImage(url) {
				this.currentImageUrl = url;
				this.imageDialogVisible = true;
			},

			// 下载影像
			downloadImage() {
				if (this.currentImageUrl) {
					const link = document.createElement('a');
					link.href = this.currentImageUrl;
					link.download = this.currentImageUrl.split('/').pop() || 'medical_image';
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
				}
			},

			// 格式化报告类型
			formatReportType(type) {
				const types = {
					'imaging': '影像报告',
					'lab': '检验报告',
					'pathology': '病理报告',
					'ecg': '心电图',
					'ultrasound': '超声报告'
				};
				return types[type] || type;
			},

			// 获取报告类型标签样式
			getReportTypeTag(type) {
				const tagMap = {
					'imaging': 'primary',
					'lab': 'success',
					'pathology': 'warning',
					'ecg': 'info',
					'ultrasound': 'danger'
				};
				return tagMap[type] || '';
			},

			// 格式化时间
			formatTime(time) {
				if (!time) return '--';
				try {
					return new Date(time).toLocaleString('zh-CN');
				} catch (e) {
					return time;
				}
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.report-detail {
		padding: 20px;
	}

	.section {
		margin-top: 25px;
		padding: 15px;
		background-color: #f8f9fa;
		border-radius: 4px;
		border-left: 4px solid #409EFF;
	}

	.section h3 {
		margin-top: 0;
		margin-bottom: 15px;
		color: #303133;
		font-size: 16px;
		font-weight: bold;
	}

	.conclusion {
		font-size: 16px;
		font-weight: bold;
		color: #f56c6c;
		padding: 10px;
		background-color: #fff;
		border-radius: 4px;
		border: 1px solid #f0f0f0;
	}

	.image-preview {
		text-align: center;
	}

	/* 响应式调整 */
	@media screen and (max-width: 768px) {
		:deep(.el-drawer) {
			width: 100% !important;
		}

		:deep(.el-dialog) {
			width: 95% !important;
		}
	}
</style>